<template>
  <div v-if="notifyModalVisible" class="notify-modal-box">
    <je-modal
      v-model:visible="notifyModalVisible"
      :title="modelTitle"
      :resize="false"
      width="750px"
      height="450px"
    >
      <template #default style="height: 100%">
        <div v-html="curNotifyItem.USERMSG_NR"></div>
      </template>
      <template #buttons="modal">
        <je-button type="primary" class="news-close-button" @click="handleClose(modal)"
          >关闭</je-button
        >
      </template>
    </je-modal>
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, watch } from 'vue';
  import { Modal, Button } from '@jecloud/ui';
  export default defineComponent({
    name: 'NotifyModal',
    components: {
      JeModal: Modal,
      JeButton: Button,
    },
    props: {
      notifyItem: {
        type: Object,
        default: () => {},
      },
    },
    setup(props) {
      const state = reactive({
        notifyModalVisible: false,
        modelTitle: '消息查看',
        curNotifyItem: props.notifyItem,
      });
      const methods = {
        handleClose(model) {
          model.close();
        },
      };
      watch(
        () => props.notifyItem,
        (val) => {
          state.curNotifyItem = val;
        },
        { deep: true },
      );
      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style>
  .notify-modal-box .je-modal--wrapper {
    z-index: 200 !important;
  }
</style>
<style scoped lang="less"></style>
